<template>
  <div class="app-container">
    <!-- 查询参数及按钮部分 -->
    <div class="filter-container">
      <el-row>
        <div class="Sign">
          <el-dialog  v-dialogDrag  
            :close-on-click-modal="false"
            :title="dialogStatus"
            :visible.sync="dialogEditFormVisible"
            width="30%"
          >
            <el-form
              ref="dataForm"
              class="dialog-Backgroundcolor"
              :model="listQuery"
              label-position="right"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="工资卡开户银行："
                    prop="工资卡开户银行"
                  >
                    <el-select
                      v-model="listQuery.salaCardBank"
                      multiple
                      class="filter-item"
                      placeholder="--请选择--"
                      clearable
                    >
                      <el-option
                        v-for="item in agencyBankLists"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-button
                  type="primary"
                  style="float:right;"
                  @click="handleFilter"
                >
                  查询
                </el-button>
              </el-row>
            </el-form>
          </el-dialog>
        </div>
        <div class="model">
          <el-col style="text-align: right;">
            <el-button
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              @click="Query"
            >
              查询
            </el-button>
          </el-col>
        </div>
      </el-row>
    </div>
    <div>
      <el-table
        ref="singalTable"
        v-loading="listLoading"
        :data="list"
        :stripe="true"
        border
        fit
        row-key="id"
        :tree-props="{children: 'children'}"
        style="width: 100%;"
        max-height="475px"
        height="475"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <template slot="empty">
          <tableEmpty />
        </template>
        <el-table-column
          prop="no"
          label="序号"
          align="center"
          width="80"
          fixed
        />

        <el-table-column
          label="银行名称"
          align="center"
          width="180"
          fixed
        >
          <template slot-scope="{row}">
            <span>{{ row.salaCardBank | bankFilter(that) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="agencyCode"
          label="单位编码"
          align="center"
          width="120"
          fixed
        />
        <el-table-column
          prop="agencyName"
          label="单位名称"
          align="center"
          width="200"
          fixed
        />
        <el-table-column
          label="统发人员"
          align="center"
        >
          <el-table-column
            prop="personSum"
            label="小计"
            align="center"
          />
          <el-table-column
            prop="personEdit"
            label="在编"
            align="center"
          />
          <el-table-column
            prop="personEditLastMonth"
            label="在编比上月"
            width="100"
            align="center"
          />
          <el-table-column
            prop="personRetire"
            label="离退休"
            align="center"
          />
          <el-table-column
            prop="personRetireLastMonth"
            label="离退休比上月"
            width="100"
            align="center"
          />
        </el-table-column>
        <el-table-column
          label="实发工资"
          align="center"
        >

          <el-table-column
            label="小计"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <span style="float: right">{{ row.realSum ? Number(row.realSum).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"):row.realSum }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="在编"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <span style="float: right">{{ row.realEdit ? Number(row.realEdit).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"):row.realEdit }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="在编比上月"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <span style="float: right">{{ row.realEditLastMonth ? Number(row.realEditLastMonth).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"):row.realEditLastMonth }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="离退休"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <span style="float: right">{{ row.realRetire ? Number(row.realRetire).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"):row.realRetire }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="离退休比上月"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <span style="float: right">{{ row.realRetireLastMonth ? Number(row.realRetireLastMonth).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"):row.realRetireLastMonth }}</span>
            </template>
          </el-table-column>

        </el-table-column>

        <el-table-column
          label="应发工资"
          align="center"
        >
          <el-table-column
            label="小计"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <span style="float: right">{{ row.shouldSum ? Number(row.shouldSum).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") : row.shouldSum }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="在编"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <span style="float: right">{{ row.shouldCareer ? Number(row.shouldCareer).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") : row.shouldCareer }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="在编比上月"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <span style="float: right">{{ row.shouldCareerLastMonth ? Number(row.shouldCareerLastMonth).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") : row.shouldCareerLastMonth }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="离退休"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <span style="float: right">{{ row.shouldRetire ? Number(row.shouldRetire).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") : row.shouldRetire }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="离退休比上月"
            align="center"
            width="120"
          >
            <template slot-scope="{row}">
              <span style="float: right">{{ row.shouldRetireLastMonth ? Number(row.shouldRetireLastMonth).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") : row.shouldRetireLastMonth }}</span>
            </template>
          </el-table-column>

        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>

    <!-- 表格部分 -->
  </div>
</template>
<script>
import { getSalaryGrantSign } from '@/api/generateSalaryData/salaryGiveOutSign'
import { getAgencyBank } from '@/api/baseInfo'
// port { getSalaryMonthEndPage } from '@/api/financialAudit/salaryMonthEnd'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import tableEmpty from '@/components/table/empty'
export default {
  name: 'SalaryGiveOutSign',
  components: { Pagination, tableEmpty },
  filters: {
    bankFilter(type, that) {
      const agencyBankLists = that.agencyBankLists
      for (const item in agencyBankLists) {
        if (agencyBankLists[item].code === type) {
          return agencyBankLists[item].name
        }
      }
      return ''
    }
  },
  data() {
    return {
      dialogStatus: '',
      dialogEditFormVisible: false,
      Show: false,
      that: this,
      list: [],
      agencyBankLists: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 200,
        title: undefined,
        agencyId: this.$store.getters.userInfo.agencyId,
        month: new Date(),
        bddw: '',
        gzlx: '',
        salaCardBank: []
      },
      bddws: [{ code: '1', name: '有变动' }, { code: '0', name: '无变动' }],
      gzlxs: [
        { code: '1', name: '事业人员' },
        { code: '0', name: '行政人员' },
        { code: '11', name: '离退休人员' }
      ]
    }
  },
  mounted() {
  },
  created() {
    this.initDict()
    this.getList()
    this.initBaseInfo()
  },

  methods: {
    initDict() {
      getAgencyBank().then(response => {
        this.agencyBankLists = Object.assign({}, response.data)
      })
    },
    // 查询
    Query() {
      this.dialogStatus = '查询'
      this.dialogEditFormVisible = true
    },
    getList() {
      this.listLoading = true
      this.listQuery['salaCardBanks'] = this.listQuery.salaCardBank.join(',')
      getSalaryGrantSign(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
      })
    },

    // 更新
    handleFilter() {
      this.getList()
      this.dialogEditFormVisible = false
    },
    // 初始化基础数据
    initBaseInfo() {
      getAgencyBank().then(response => {
        this.agencyBankLists = Object.assign({}, response.data)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .editFormDeviation {
    margin-left: 10%;
  }
  .viewFormDeviation {
    margin-left: 6%;
  }
  ::v-deep .el-select {
    .el-input {
      height: auto !important;
    }
  }
</style>

